<template>
  <div class="echart-container">
    <div class="mapDiv">
      <map-chart></map-chart>
    </div>
    <div class="lineDiv">
      <line-chart></line-chart>
    </div>
    <div class="topBarDiv">
      <top-bar-chart></top-bar-chart>
    </div>
    <div class="gaugeDiv">
      <gauge-chart></gauge-chart>
    </div>
    <div class="areaDiv">
      <area-chart></area-chart>
    </div>
    <div class="funnelDiv">
      <funnel-chart></funnel-chart>
    </div>
  </div>
</template>

<script>
import MapChart from '@/components/echarts/map'
import LineChart from '@/components/echarts/line'
import TopBarChart from '@/components/echarts/topBar'
import GaugeChart from '@/components/echarts/gauge'
import AreaChart from '@/components/echarts/area'
import FunnelChart from '@/components/echarts/Funnel'
export default {
  data () {
    return {

    }
  },
  components: {
    MapChart,
    LineChart,
    TopBarChart,
    GaugeChart,
    AreaChart,
    FunnelChart
  }
}
</script>

<style lang="less" scoped>
.echart-container{
   display: flex;
  flex-wrap: wrap;
  .mapDiv {
    width: 400px;
    height: 300px;
  }
  .lineDiv {
    height: 200px;
    width: 400px;
  }
  .topBarDiv {
    width: 400px;
    height: 250px;
  }
  .gaugeDiv {
    width: 300px;
    height: 300px;
  }
  .areaDiv {
    width: 400px;
    height: 300px;
  }
  .funnelDiv {
    width: 400px;
    height: 400px;
  }
}
</style>
